<template>
<div class="page-VisualTempEdit">
    <!-- temp-page-mod-look:预览模式 -->
    <!-- temp-page-mod-edit:编辑模式 -->
    <!-- 操作按钮 -->
    <div class="temp-opera-btn-line">
        <div class="opera-line opera-line-l">
            
        </div>
        <div class="opera-line opera-line-c">{{templateName}}</div>
        <div class="opera-line opera-line-r">
            <el-button class='gia-btn-has-bd-color temp-btn-item' @click='goBack'>返回</el-button>
            <el-button class='gia-btn-has-bd-color temp-btn-item' @click='showPreviewDialog'>
                <span v-if='!previewDialogFlag'>预览</span>
                <span v-if='previewDialogFlag'>退出预览</span>
            </el-button>
            <el-button class='gia-btn-has-bd-color temp-btn-item' @click='saveTheTemp'>保存</el-button>
        </div>
    </div>

    <!-- 容器-编辑 -->
    <CommonTempPage 
        :editTempFlag='!previewDialogFlag'
        :prevTempFlag='previewDialogFlag'
        :templateId='templateId' 
        :briefingDetailId='briefingDetailId'
        @saveTheTemp='saveTheTemp' 
        @releTheTemp='releTheTemp' 
        ref='CommonTempPage-edit'></CommonTempPage>
</div>
</template>
<script>
import CommonTempPage from '/@/views/visualEditTemp/tempPages/CommonTemp.vue'

export default {
    name: 'VisualTempEditTemp',
    mounted() {
        let templateId = '11';//C.Utils.data(C.Constant.DK.BRIEFING_DETAIL_TEMPLATEID);
        let templateName = '22';//C.Utils.data(C.Constant.DK.BRIEFING_DETAIL_NAME);

        this.templateId = templateId;
        this.templateName = templateName;
        //C.Utils.data(C.Constant.DK.CIO_BRIEFING_DETAIL_ID, null);
    },
    components: {
        CommonTempPage: CommonTempPage
    },
    data() {
        return {
            // 模板主键
            templateId: '',
            // 模板名称
            templateName: '',
            //内容id
            briefingDetailId: '',
            // 预览
            previewDialogFlag: false
        };
    },
    methods: {
        // 提交-全模板
        releTheTemp() {
            this.$refs['CommonTempPage-edit'].sendSaveForEditMod();
        },
        // 保存-全模板
        saveTheTemp() {
            this.$refs['CommonTempPage-edit'].saveTheTemp();
        },
        // 预览-打开
        showPreviewDialog() {
            this.previewDialogFlag = !this.previewDialogFlag;
            //window.open('/#/VisualTempPrevEmpty');
        },
        // 预览-关闭
        hidePreviewDialog() {
            this.previewDialogFlag = false;
        },
        // 返回
        goBack () {
            this.$router.go(-1);
        },
    }
};
</script>
<style scoped>
.page-VisualTempEdit{ padding-top: 70px; background-color: #f5f5f5;}
.temp-opera-btn-line{ position: fixed; top: 0; left: 0; display: flex; width: 100%; z-index: 11; padding: 10px 20px; background-color: #FFF; border-bottom: 1px solid #DDD;}
.temp-opera-btn-line .opera-line{ flex: 1; line-height: 32px;}
.temp-opera-btn-line .opera-line.opera-line-l{ text-align: left; }
.temp-opera-btn-line .opera-line.opera-line-c{ text-align: center; font-size: 20px; color: #000;}
.temp-opera-btn-line .opera-line.opera-line-r{ text-align: right; }
.temp-opera-btn-line .temp-btn-item{ margin-left: 10px; }
.temp-opera-btn-line .opera-back{ color: #999; }
</style>
